<template>
  <el-drawer :visible="drawerEditBoolen"
             :before-close="handleClose"
             title="新增/编辑公里出行费用区间"
             ref="drawer"
             size="700px">
    <!-- 主体信息 -->
    <div class="ele-body">
      <el-card shadow="never">
        <el-form label-position="top"
                 :model="form"
                 ref="form"
                 :rules="rules"
                 class="ruleForm">
          <el-form-item label="最小公里数"
                        prop="siteName">

            <el-input maxlength="100"
                      show-word-limit
                      placeholder="请输入最小公里数"
                      v-model="form.siteName"></el-input>

          </el-form-item>
          <el-form-item label="最大公里数"
                        prop="siteDomainName">
            <el-input maxlength="200"
                      show-word-limit
                      placeholder="请输入最大公里数"
                      v-model="form.siteDomainName"></el-input>

          </el-form-item>
          <el-form-item label="优惠券面值"
                        prop="contactPerson">
            <el-input placeholder="请输入内容"
                      type="number"
                      v-model="form.allowSize">
              <template slot="append">元</template>
            </el-input>

          </el-form-item>

          <div class="drawer__footer">
            <el-button round
                       type="plain"
                       @click="handleClose"
                       size="medium">返回</el-button>
            <el-button type="primary"
                       round
                       size="medium"
                       @click="save">确定</el-button>
          </div>
        </el-form>
      </el-card>

    </div>

  </el-drawer>
</template>

<script>
import { siteInsert, siteModify } from '@/api/siteList/index'
export default {
  name: 'drawerEdit',
  components: {

  },
  props: {
    drawerEditBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object

  },
  data () {
    // 默认表单数据
    const defaultWhere = {
      // 站点名称
      siteName: '',
      // 站点域名
      siteDomainName: '',
      // 联系人
      contactPerson: '',
      // 联系电话
      contactNumber: '',
      // 申请时间
      dateRange: [],
    };

    return {
      isUpdate: false,
      dialogVisible: false,
      form: {

        ...defaultWhere
      },
      sumbitForm: {},
      dialogImageUrl: '',
      // 正则校验
      rules: {
        siteName: [
          {
            required: true,
            message: '请输入站点名称',
            trigger: 'blur'
          }
        ],
        siteDomainName: [
          {
            required: true,
            message: '请输入站点域名',
            trigger: 'blur'
          }
        ],
        contactPerson: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }
        ],
        contactNumber: [
          {
            required: true,
            message: '请输入联系人电话',
            trigger: 'blur'
          }
        ],

      }
    };
  },
  methods: {

    // 关闭抽屉
    handleClose () {
      console.log('查看详情');

      this.$emit('update:drawerEditBoolen', false);

    },
    handleFileChange (file, fileList) {
      console.log(file, fileList)
    },
    // 新增
    save () {

      for (const key in this.form) {
        if (key == 'dateRange') {
          let startTime = this.form[key]?.[0];
          let endTime = this.form[key]?.[1];
          this.sumbitForm['startDate'] = startTime == undefined ? '' : startTime;
          this.sumbitForm['endDate'] = endTime == undefined ? '' : endTime;
        } else {
          this.sumbitForm[key] = this.form[key];
        }
      }
      console.log(this.sumbitForm)

      const saveOrUpdate = this.isUpdate ? siteModify : siteInsert;
      saveOrUpdate(this.sumbitForm)
        .then((msg) => {
          console.log(msg)
          this.loading = false;
          this.$message.success(msg);
          if (!this.isUpdate) {
            this.$router.go(0);
          }
          this.handleClose()
          this.$emit('done');
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });

    },

  },
  watch: {
    drawerEditBoolen (visible) {
      this.$nextTick(() => {
        if (visible) {
          console.log(this.data)
          if (this.data) {
            this.form.id = ''
            this.$util.assignObject(this.form, {
              ...this.data,

            });
            this.form.dateRange = [this.data.startDate, this.data.endDate]
            console.log(this.form)
            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$nextTick(() => {
            this.$refs['form'].resetFields();
            console.log(this.form)

          })

        }
      })
    }
  }
};
</script>
<style lang="less">
.drawer__footer {
  display: flex;
  justify-content: flex-end;
}

// /deep/.el-select {
//   width: 100%;
// }
// /deep/.el-cascader--medium {
//   width: 100%;
// }
</style>